<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">		
	
<ui:composition 
	xmlns="http://www.w3.org/1999/xhtml" xmlns:f="http://java.sun.com/jsf/core" 
	xmlns:h="http://java.sun.com/jsf/html" xmlns:ui="http://java.sun.com/jsf/facelets">	
			
	<script type="text/javascript">
	//<![CDATA[
	           
		var ciudades = ['Elche', 'Alicante', 'Murcia'];	//En vez de usar coordenadas latitud - longitud usaremos geolocalizacion.
		var theInterval;
		var map, infoBubble;  							//Mapa y el bocadillo de información.
		var geocoder; 									//Necesario para realizar busquedas.
	       
		$(document).ready(function(){																				
			//Carga el mapa de GoogleMaps
			initialize();			
			
			
			clearInterval(intervalBar);				//Paramos el hilo que se crea para aumentar la barra de progreso			
			$("#progressbar").hide("fade", 200);	// y ahora escondemos la barra de progreso
			
			//Ocultamos el botón darse de alta y mostramos el boton de cerrar sesion.
			$("#botonTextoHead").hide();
			$("#botonTextoHead2").show("drop", 400);			
			
			//Cambio Pestañas
			$("#li_1").hide();
			$("#li_2").hide();
			$("#li_3").hide();
			$("#li_4").show();
			$("#li_5").show();
			$("#li_6").show();
		});	
		
		//Inicializamos y Mostramos el Mapa con los Markadores  TODO ESTO ES SIEMPRE IGUAL, SOTACABALLOREY
		function initialize(){		
			
			//Posición central de inicio
			var latlng = new google.maps.LatLng(39.960, -3.284);  //en esta variable almacenamos las coordenadas de la cámara
			
			//Estilo del mapa personalizado (array con la estructura del api de googlemaps)
			var styleOff = [{visibility: 'off'}];
			var stylez = [
				{featureType: 'transit',   stylers: styleOff},								 
				{featureType: 'poi',  	   stylers: styleOff},
				{featureType: 'landscape', stylers: styleOff},
				{featureType: 'road', 	   stylers: styleOff}
			];
			
			//Opciones de carga de inicio del mapa (array con la estructura del api de googlemaps)
			var myOptions = {	    		
		    	streetViewControl: false,
		    	mapTypeControl: false,
		    	zoom: 6, center: latlng,
		    	mapTypeId: 'Border View',
		    	zoomControlOptions: {style: google.maps.ZoomControlStyle.SMALL}
		    };
			
			//Creamos el mapa con el div donde se va a crear el mapa y con nuestras opciones
			map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

			geocoder = new google.maps.Geocoder(); //Para poder usar el geocoder y realizar busquedas de geolocalización Desde el nombre haalar las coordenadas
			
			//Aplicamos el nuevo estilo al mapa
			var customMapType = new google.maps.StyledMapType(stylez, {name: 'Border View'}); //Seteamos el estilo en el MapType
			map.mapTypes.set('Border View', customMapType);

			//Crea un retardo entre marcadores			
	        theInterval = setInterval("addMarker()", 300);		 // Intervalo para que caigan las bombillitas (markers)
	        							
			controlDeZoom();
			controlDePosicion();
			
		}		
		
		//Función para limitar el control de Zoom
		function controlDeZoom(){		
			google.maps.event.addListener(map, 'zoom_changed', function(){
				var zoomLevel = map.getZoom();				
			    if(zoomLevel > 10){
				      map.setZoom(10);
				}
			    if(zoomLevel < 5){
				      map.setZoom(5);
				}   
		  	});
		}
		
		//Función para limitar el control de Posición
		function controlDePosicion(){
			
			// Límites para España
			var allowedBounds = new google.maps.LatLngBounds(										
				new google.maps.LatLng(26.96, -18.33), 
			    new google.maps.LatLng(42.88, 5.56));

			google.maps.event.addListener(map, 'center_changed', function(){
				if(allowedBounds.contains(map.getCenter())){
					return;
				}else{
				     // Out of bounds - Move the map back within the bounds (acotamos el mapa)
				     var c = map.getCenter(),
				         x = c.lng(),
				         y = c.lat(),
				         maxX = allowedBounds.getNorthEast().lng(),
				         maxY = allowedBounds.getNorthEast().lat(),
				         minX = allowedBounds.getSouthWest().lng(),
				         minY = allowedBounds.getSouthWest().lat();

				     if (x < minX) x = minX;
				     if (x > maxX) x = maxX;
				     if (y < minY) y = minY;
				     if (y > maxY) y = maxY;

				     map.setCenter(new google.maps.LatLng(y, x));							    	
				}
			});
			
		}

		//Agrega los marcadores al Mapa
	    function addMarker() {
			
	    	if(ciudades.length == 0) {
				clearInterval(theInterval);  // si la cantidad de ciudades es 0 paramos el intervalo
			}			
	    	var ciudad = ciudades.pop();		// sacamos (y borramos) una de las ciudades del array y lo metemos en la variable 
    		
	    	geocoder.geocode({'address': ciudad}, function(results, status){   // ADRESS para texto de dirección o POSITION para coordenadas  //Results es el resultado de la búsqueda, y status es true si todo ha ido bien

	    		if (status == google.maps.GeocoderStatus.OK) {
				    	window.pageContext = '${request.contextPath}';
				    	var image = window.pageContext + '/img/bombilla.png';	    		    	    
				    	  
				    	var marker = new google.maps.Marker({
				        	position: results[0].geometry.location,		// Results siempre es un array con varios resultados [0] es la primera
				        	map: map,
				        	draggable: false,							// La bombilla no es movible por el usuario
				        	animation: google.maps.Animation.DROP,		// La bombilla cae de arriba hacia abajo
				        	icon: image									// El Icono es una bombilla
				    
		    	
		        }); }
		    			
		    	attachSecretMessage(marker);		    			    // Esta es la funcion que agrega los marcadores al mapa
		    
	    	});
	    	
	    }
	    
	  	//Activamos una Funcion si se Pulsa el Marcador Es lo que saca el bocadillo cuando se pulsa el marcador
	  	function attachSecretMessage(marker){

	  		var contentString = '<div>'+
						        '<h3>Golden Team</h3>'+
						        '<p><b>Golden Team</b>, also referred to as <b>estos tíos son unos putos cracks</b>, is a brutal ' +
						        'sandstone rock formation cluster of (2) persons located in the southern part'+
						        'of the Vinalopó river.</p></div>';

			infoBubble = new InfoBubble({
	        	maxWidth: 300
	        });	        	        	       

	        var div = document.createElement('DIV');
	        div.innerHTML = 'Golden Team';				//Le hemos añadido el contenido html aquí habrá que meterle magrilla

	        infoBubble.addTab('Tab A', div);				// infoBubble trabaja con Divs, aquí se lo pasamos con la opcion 1
	        infoBubble.addTab('Tab B', contentString);		// infoBubble trabaja con Divs, aquí se lo pasamos con la opcion 2

  			google.maps.event.addListener(marker, 'click', function(){
  				if(!infoBubble.isOpen()){
  		            infoBubble.open(map, marker);
  				}    			
  			});  			

		}
	  	
	//]]>
	</script>	
	
	<div class="principalMain">
	                                   
		<div id="divMap" class="ui-widget-content ui-corner-all cajaIzqMapa">						
			<h4 class="ui-widget-header ui-corner-all">Mapa de Posibles Plazas</h4>
			<div id="map_canvas" class="div-maps"/>
		</div>
		
		<div id="cajasIzda" align="right">
			<div id="userDat" class="ui-widget-content ui-corner-all cajaDerechaDatosCliente">
				<h4 class="ui-widget-header ui-corner-all">Datos de Usuario</h4>			
				<b>Nombre: </b><h:outputText value="#{clienteBean.nombre}" />&#160;<h:outputText value="#{clienteBean.apellidos}" /><br/>
				<b>Email: </b><h:outputText value="#{clienteBean.email}" /><br/>
				<b>Ciudad: </b><h:outputText value="#{clienteBean.ciudada.ciudad}" />					
			</div>
			
			<div id="userDat" class="ui-widget-content ui-corner-all cajaDerechaDatosOferta">
				<h4 class="ui-widget-header ui-corner-all">Datos de la oferta</h4>			
				<b>Ciudad: </b><h:outputText value="#{ofertaBean.ciudadb.ciudad}" /><br/>
				<b>Id del Sector Laboral: </b><h:outputText value="#{clienteBean.sector}"/><br/>
				<b>Id del Departamento: </b><h:outputText value="#{clienteBean.departamento}" />					
			</div>

		</div>
		
	</div>	
  	  	  	
</ui:composition>